<template>
  <div id="app">
    <!-- //缩放功能主要是缩放VueDrangResize标签x -->
    
    <VueDragResize :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
    <!-- 　　图片缩放　将这个div的宽高动态设置==VueDrangResize的宽高，这样可实时完成缩放 -->
    
    　　<div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}">
    <!-- 　　我这写的是本地的图片，图片可以动态获取 -->
    　　　　<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589805561709&di=82b245b5bc9a1428cdcba91519655ada&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fd62a6059252dd42a1c362a29033b5bb5c9eab870.jpg">
    　　</div>
    </VueDragResize>
    </div>
</template>
<script>
  import VueDragResize from 'vue-drag-resize' //缩放、拖拽
  export default {
    components: {
      VueDragResize
    },
    data() {
      return {
  　　　　vw: 0,
  　　　　vh: 0,
  　　　　top: 0,
  　　　　left:0
  　　};
    },
    created() {
  　　this.vw = 200 + "px";
  　　this.vh = 200 + "px";
    },
    methods: {
      resize(newRect) {
        this.vw = newRect.width;
        this.vh = newRect.height;
        this.top = newRect.top;
        this.left = newRect.left;
      }
    },
  }
</script>

<style scoped>

</style>
